<template>
  <el-form ref="form" :model="dept" label-width="80px">
    <el-form-item label="部门名称">
      <el-input v-model="dept.name"></el-input>
    </el-form-item>
    <el-form-item label="详细描述">
      <el-input
        type="textarea"
        v-model="dept.remark"
        style="width: 500px"
      ></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">立即添加</el-button>
      <el-button @click="reset">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "AddBuMen",
  data() {
    return {
      dept: {
        name: "",
        remark: "",
      },
    };
  },
  methods: {
    reset() {
      this.dept.name = "";
      this.dept.remark = "";
    },
    onSubmit() {
      console.log("submit!");
      console.log(this.dept);
      if (this.dept.name != "" && this.dept.remark != "") {
        this.$request
          .post("dept/insert", {
            name: this.dept.name,
            remake: this.dept.remark,
          })
          .then((res) => {
            if ((res.data.obj = true)) {
              this.$message.success("添加成功！");
              this.dept.name = "";
              this.dept.remark = "";
            } else {
              this.$message.warning("添加失败！");
            }
          });
      } else {
        this.$message.error("请输入完整再次尝试！");
      }
    },
  },
};
</script>

<style scoped>
.el-input {
  width: 400px;
}
</style>
